<!DOCTYPE html>
<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. All occurrences of existing tokens will be replaced by their appropriate values.
	4. Blank lines will be removed automatically.
	5. Remove unnecessary comments before creating your template.
-->
<html>

<head>
	<meta charset="UTF-8">
	<meta name="authoring-tool" content="Adobe_Animate_CC">
	<title>无标题-3_HTML5 Canvas</title>
	<!-- write your code here -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

	<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
	<script src="index.js"></script>
	<link rel="stylesheet" href="./static/common/common.css">
	<script src="./static/common/common.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
	<script>
		var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
		function init() {
			canvas = document.getElementById("canvas");
			anim_container = document.getElementById("animation_container");
			dom_overlay_container = document.getElementById("dom_overlay_container");
			var comp = AdobeAn.getComposition("80ACC8F397D0C547B137068061F6869C");
			var lib = comp.getLibrary();
			var loader = new createjs.LoadQueue(false);
			loader.addEventListener("fileload", function (evt) { handleFileLoad(evt, comp) });
			loader.addEventListener("complete", function (evt) { handleComplete(evt, comp) });
			var lib = comp.getLibrary();
			loader.loadManifest(lib.properties.manifest);
		}
		function handleFileLoad(evt, comp) {
			var images = comp.getImages();
			if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
		}
		function handleComplete(evt, comp) {
			//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
			var lib = comp.getLibrary();
			var ss = comp.getSpriteSheet();
			var queue = evt.target;
			var ssMetadata = lib.ssMetadata;
			for (i = 0; i < ssMetadata.length; i++) {
				ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
			}
			exportRoot = new lib.无标题3_HTML5Canvas();
			stage = new lib.Stage(canvas);
			//Registers the "tick" event listener.
			fnStartAnimation = function () {
				stage.addChild(exportRoot);
				createjs.Ticker.setFPS(lib.properties.fps);
				createjs.Ticker.addEventListener("tick", stage);
			}
			//Code to support hidpi screens and responsive scaling.
			function makeResponsive(isResp, respDim, isScale, scaleType) {
				var lastW, lastH, lastS = 1;
				window.addEventListener('resize', resizeCanvas);
				resizeCanvas();
				function resizeCanvas() {
					var w = lib.properties.width, h = lib.properties.height;
					var iw = window.innerWidth, ih = window.innerHeight;
					var pRatio = window.devicePixelRatio || 1, xRatio = iw / w, yRatio = ih / h, sRatio = 1;
					if (isResp) {
						if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
							sRatio = lastS;
						}
						else if (!isScale) {
							if (iw < w || ih < h)
								sRatio = Math.min(xRatio, yRatio);
						}
						else if (scaleType == 1) {
							sRatio = Math.min(xRatio, yRatio);
						}
						else if (scaleType == 2) {
							sRatio = Math.max(xRatio, yRatio);
						}
					}
					canvas.width = w * pRatio * sRatio;
					canvas.height = h * pRatio * sRatio;
					canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
					canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + 'px';
					stage.scaleX = pRatio * sRatio;
					stage.scaleY = pRatio * sRatio;
					lastW = iw; lastH = ih; lastS = sRatio;
					stage.tickOnUpdate = false;
					stage.update();
					stage.tickOnUpdate = true;
				}
			}
			makeResponsive(false, 'both', false, 1);
			AdobeAn.compositionLoaded(lib.properties.id);
			fnStartAnimation();
		}
	</script>
	<!-- write your code here -->
</head>

<body class="pos_r" onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:832px">
		<canvas id="canvas" width="1280" height="832"
			style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container"
			style="pointer-events:none; overflow:hidden; width:1280px; height:832px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
	<div class="main pos_a">
		<img class="z1 pos_a" src="./images/zz1.png" alt="">
		<img class="z2 pos_a" src="./images/zz2.png" alt="">
		<img class="z3 pos_a" src="./images/zz3.png" alt="">
		<img class="z4 pos_a" src="./images/zz4.png" alt="">
		<img class="z5 pos_a" src="./images/zz6.png" alt="">
		<img class="z6 pos_a" src="./images/zz7.png" alt="">
		<img class="chol pos_a" src="./images/image 4.png" alt="">
		<img src="./images/image 2.png" class="pos_a logo" alt="">
		<div class="page pos_a">
			<ul class="flex_y">
				<a href="./index.html"><li class="active">01</li></a>
				<a href="./page2.html"><li>02</li></a>
				<a href="./page3.html"><li>03</li></a>
				
				<a href="./page4.html"><li>04</li></a>
				<a href="./page5.html"><li>05</li></a>
			</ul>
		</div>
	</div>
</body>
<style>
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.main {
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.z1 {
		bottom: 0px;
		left: 100px;
		animation: rotate 3s linear infinite;
	}

	.z2 {
		bottom: 200px;
		left: 260px;
		animation: rotate 3s linear infinite;
	}

	.z3 {
		bottom: 320px;
		left: 500px;
		animation: rotate 3s linear infinite;
	}

	.z4 {
		bottom: 290px;
		left: 700px;
		animation: rotate 3s linear infinite;
	}
	.z5 {
		bottom: 180px;
		left: 860px;
		animation: rotate 3s linear infinite;
	}
	.z6 {
		bottom: 0px;
		left: 1000px;
		animation: rotate 3s linear infinite;
	}
	.mian img {
		width: 152px;
		height: 170px;
	}
	.main .chol{
		width: 300px;
		height: 159px;
		right: 118px;
		bottom: 348px;
	}
	.main .logo{
		width: 243px;
		height: 148px;
		left: 68px;
		top: 33px;
	}

</style>

</html>